<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <button>测试拦截器</button>
    <script>
        /* 
        为什么要设计拦截器语法
        1. 所有请求都携带一个特定的请求头
        2. 所有请求发出去前打印一个日志输出
        3. 所有请求成功的value都是响应体, 直接得到response.data
        4. 所有请求失败了, 我做一个统一的错误提示
      */
        const request = axios.create({
            baseURL: 'http://localhost:8081',
            timeout: 8000
        })
        // 添加请求拦截器
        request.interceptors.request.use((config) => {
            console.log('请求拦截器回调')
            config.headers['token'] = 'atguigu'
            console.log('请求', Date.now(), config.url)
            return config
        })

        // 添加拦截器响应
        request.interceptors.response.use(
            (response) => {
                console.log('响应拦截器成功回调')
                return response.data
            },
            (error) => {
                alert('请求错误：' + error.message)
                return Promise.reject(error)
            }
        )

        const btn = document.querySelector('button');

        // btn.onclick = () => {
        //     request({
        //         url: '/delay-server/aaa',
        //         method: 'post',
        //         params: { a: 1, b: 2 },
        //         data: { c: 3, d: 4 },
        //     }).then(
        //         response => {
        //             console.log('请求成功的回调数据', response)
        //         },
        //         error => {
        //             console.log('具体请求的失败回调', error)
        //         }
        //     )
        // }
        btn.onclick = async () => {
            const res = await request({
                url: '/delay-server/aaa',
                method: 'post',
                params: { a: 1, b: 2 },
                data: { c: 3, d: 4 },
            })
            console.log(res)
        }





    </script>
</body>

</html>